<template>
  <div class="audit-terminalChangeAgent-view">

    <item-title title="变更后使用的新渠道客户信息" />

    <el-form :inline="true">

      <el-row>

        <el-col :span="8">
          <el-form-item label="营销模式:">
            <!--            {{ getLabel('agent_type', datas.agentType) }}-->
            <span v-if="datas.sellMode == 'direct'">终端直销</span>
            <span v-else-if="datas.agentAttribute == 1">独家招商</span>
            <span v-else-if="datas.agentAttribute == 2">精细招商</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="代理商名称:">
            {{ datas.agentName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="交易价:">
            {{ datas.tradePrice }}元
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="负责营销职员:">
            {{ datas.headName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="最低销量:">
            <span v-if="datas.minSale">{{ datas.minSale }}{{ getLabel('sell_unit',datas.sellUnit) }}/{{ getLabel('sell_num_unit',datas.minSaleUnit) }}</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="销量保证金:">
            <span v-if="datas.minSalePromise">{{ datas.minSalePromise }}元</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <item-title title="变更交易终端列表" />

    <el-table
      style="margin-bottom: 20px"
      :data="tableData"
      border
    >
      <el-table-column
        header-align="center"
        align="center"
        label="终端编号"
        prop="terminalNo"
      />
      <el-table-column
        header-align="center"
        align="center"
        label="终端名称"
        prop="terminalName"
      />
      <el-table-column
        header-align="center"
        align="center"
        label="终端所在地区"
      >
        <template #default="scope">
          {{ scope.row.provinceName }}/{{ scope.row.cityName }}/{{ scope.row.areaName }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="产品信息"
        prop="productInfoDetail.productPopularName"
      />
      <el-table-column
        header-align="center"
        align="center"
        label="终端价(元)"
      >
        <template #default="scope">
          ¥{{ scope.row.terminalPrice }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="当前代理商"
        prop="agentName"
      />
      <el-table-column
        header-align="center"
        align="center"
        label="交易价(元)"
      >
        <template #default="scope">
          ¥{{ scope.row.tradePrice }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="招商要素编号"
      >
        <template #default="scope">
          <span v-if="scope.row.agentProductDetail">{{ scope.row.agentProductDetail.agentProductNumber }}</span>
        </template>
      </el-table-column>

    </el-table>

  </div>
</template>

<script>
// 变更交易端代理信息审批
import {defineComponent, reactive, toRefs, watch} from 'vue'

export default defineComponent({
  name: 'TerminalChangeAgent',
  props: {
    detailData: {
      type: Object,
      default: {},
    },
  },
  setup(props) {
    var data = reactive({
      datas: {},
      tableData: [],
    })

    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval && newval.data) {
          console.log(newval.data)
          if (newval.data.AgentProductRes) {
            data.datas = newval.data.AgentProductRes
            data.tableData = newval.data.Standards
          }
        }
      },
      { immediate: true, deep: true }
    )

    return {
      ...toRefs(data),
    }
  },
})
</script>

<style scoped>
</style>
